<template>
    <div :class="button_class">
        <input :type="inputType" :value="modelValue" @input="input" :placeholder="placeholder" :disabled="disabled" />
    </div>
</template>

<script>
export default {
    name: "AnInput"
}
</script>

<script setup>
import { computed } from 'vue'

const emit = defineEmits(["update:modelValue"])

const props = defineProps({
    modelValue: String | Number,
    placeholder: String,
    disabled: Boolean,
    round: Boolean,
    password: Boolean,
    size: String,
})

const inputType = computed(() => {
    return props.password ? "password" : "text"
})

const input = (e) => {
    emit("update:modelValue", e.target.value)
}

const button_class = computed(() => {
    return [
        "an-input",
        {
            "an-button-small": props.size === "small"
        },
        {
            "an-button-medium": props.size === "medium"
        },
        {
            "an-button-large": props.size === "large"
        },
        {
            "an-button-large-max": props.size === "large-max"
        },
        {
            "an-button-round": props.round
        },
        {
            "an-button-disabled": props.disabled
        }
    ]
})
</script>

<style lang="scss" scoped>
.an-input {
    display: inline-block;
    min-width: 260px;
    input {
        outline: none;
        border: 1px solid #d4d3d3;
        line-height: 1;
        padding: 10px 8px;
        width: 100%;
        font-size: 14px;
        color: #505050;
        border-radius: 4px;
        transition: all .15s ease;
        &:focus {
            border-color: #ffcf3f;
        }
    }
}

.an-button-disabled {
    border-color: #e5e5e5;
    color: #c0c0c0;
    input {
        cursor: no-drop;
    }
}

.an-button-round {
    input{
        border-radius: 20px;
    }
}

.an-button-small{
    input{
        height: 10px;
    }
}

.an-button-medium{
    input{
        height: 28px;
    }
}

.an-button-large{
    input{
        height: 36px;
    }
}

.an-button-large-max{
    input{
        height: 48px;
    }
}

</style>